<template>
  <div class="search">
    <u-input v-model="QueryData.keywords" class="input" :customStyle="customStyle" placeholder="搜索关键字">
      <template #suffix v-if="!show">
        <u-button  style="height:64rpx;border-radius:0rpx 16rpx 16rpx 0rpx;right:-20rpx;background:#468eff" type="primary"  @click="confirm">搜索</u-button>
      </template>
    </u-input>
    <div class="filter" @click="openFilter">
      <span class="text">筛选</span>
      <image class="icon" src="~@/static/activity/filter.png" />
    </div>
  </div>
  <div class="mask" :style="style" :class="{show:show}" @click="close">
    <div class="container" :style="containerStyle" @click.stop="">
      <div class="item" v-for="item in filterList">
        <div class="radio" v-if="item.type=='radio'">
          <div class="label">{{item.label}}</div>
          <div class="options">
            <div class="option" @click="QueryData[item.param] = i.value" v-for="i in item.options" :class="{radio_active:QueryData[item.param]==i.value}">
              {{i.label}}
            </div>
          </div>
        </div>

        <div class="time" v-if="item.type=='time'">
          <div class="label">{{item.label}}</div>
          <div class="value">
            <div class="date" @click="datePickerOpen(item.param1)">
              <image src="@/static/icon/clock.png" />
              <span class="text_value" v-if="QueryData[item.param1]">{{QueryData[item.param1]}}</span>
              <span v-else class="text_placeholder">开始时间</span>
            </div>
            <div class="date" @click="datePickerOpen(item.param2)">
              <image src="@/static/icon/clock.png" />
              <span class="text_value" v-if="QueryData[item.param2]">{{QueryData[item.param2]}}</span>
              <span v-else class="text_placeholder">结束时间</span>
            </div>
          </div>
        </div>
      </div>

      <div class="action">
        <u-button class="btn" type="primary" plain @click="reset">重置</u-button>
        <u-button class="btn" type="primary" @click="confirm">确定</u-button>
      </div>
    </div>
  </div>
  <u-datetime-picker ref="datetimePicker" @confirm="datePickerConfirm" @cancel="datePickerCancel" v-model="timePicker" :show="datePickerShow" mode="datetime"></u-datetime-picker>
</template>

<script setup>
import { ref } from 'vue'
const filterList = ref([])
const show = ref(false)
const style = ref({ top: '100rpx' })
const containerStyle = ref({ maxHeight: `calc(100vh - ${style.value.top})` })
const customStyle = { border: '1rpx solid #468eff !important', borderRadius: '16rpx', background: '#ecf3ff', height: '64rpx' }

const QueryData = ref({})
const pickerShows = ref({})
const timePicker = ref('')
const datetimePicker = ref(null)
const emits = defineEmits(['confirm','openFilter'])

function openFilter(){
  if (show.value) {
    show.value = false
    return
  }
  emits('openFilter')
}

function open(data) {
  show.value = true
  filterList.value = data.filterList
  style.value = {
    top: data.top + 'rpx'
  }
}
function close() {
  show.value = false
}
const datePickerShow = ref(false)
const queryDataParam = ref('')
function datePickerOpen(param) {
  if (QueryData.value[param]) {
    datetimePicker.value.innerValue = new Date(QueryData.value[param]).getTime()
  }else {
    datetimePicker.value.innerValue = new Date().getTime()
  }
  queryDataParam.value = param
  datePickerShow.value = true
}
function datePickerCancel() {
  datePickerShow.value = false
}
function datePickerConfirm(e) {
  const value = formatDateWithFourDigitYear(e.value)
  QueryData.value[queryDataParam.value] = formatDateWithFourDigitYear(e.value)
  datePickerShow.value = false
  console.log(QueryData.value)
}
// 时间戳转换
function formatDateWithFourDigitYear(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的  
  const day = ('0' + date.getDate()).slice(-2);
  const hours = ('0' + date.getHours()).slice(-2);
  const minutes = ('0' + date.getMinutes()).slice(-2);
  const seconds = ('0' + date.getSeconds()).slice(-2);
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

function reset() {
  Object.keys(QueryData.value).forEach(item => {
    QueryData.value[item] = undefined
  })
}
function confirm() {
  show.value = false
  emits('confirm', QueryData.value)
}




defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mask {
  background: rgba($color: #000000, $alpha: 0.6);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  opacity: 0;
  z-index: -1;
  transition: all 0.2s;
}

.show {
  opacity: 1;
  z-index: 999;
  .container {
    opacity: 1;
    transform: translateY(0rpx) !important;
  }
}

.container {
  position: relative;
  transform: translateY(-88rpx);
  width: 100vw;
  opacity: 0.5;
  background: #ffffff;
  border-radius: 0px 0px 16rpx 16rpx;
  transition: all 0.2s;
  padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  overflow-y: scroll;
}
.label {
  height: 80rpx;
  width: 114px;
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #333333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.radio {
  .options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20rpx;
    .option {
      flex: 1;
      width: 160rpx;
      height: 60rpx;
      background: #f3f3f3;
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      text-align: center;
      color: #666666;
    }
    .radio_active {
      background: #ecf3ff;
      color: #468eff;
    }
  }
}
.time {
  .value {
    display: flex;
    gap: 19rpx;
    .date {
      flex: 1;
      height: 60rpx;
      border: 1rpx solid #d8d8d8;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      .text_placeholder {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #cccccc;
      }
      .text_value {
        color: #333333;
        font-size: 24rpx;
      }

      image {
        width: 32rpx;
        height: 32rpx;
        padding-right: 12rpx;
      }
    }
  }
}
.action {
  display: flex;
  margin-top: 40rpx;
  gap: 18rpx;
  .btn {
    border-radius: 16rpx;
  }
}
.search {
  margin-top: 10rpx;
  padding: 0 30rpx;
  display: flex;
  gap: 40rpx;

  .filter {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    display: flex;
    align-items: center;
    .icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
</style>